<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> <?php
 $name = "cfg_sitetitle"; if(empty($name)){ echo ""; }else{ echo htmlspecialchars_decode(C($name)); } ?> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content=" <?php
 $name = "cfg_sitedescription"; if(empty($name)){ echo ""; }else{ echo htmlspecialchars_decode(C($name)); } ?> ">
<meta name="Keywords" content=" <?php
 $name = "cfg_sitekeywords"; if(empty($name)){ echo ""; }else{ echo htmlspecialchars_decode(C($name)); } ?> ">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/mui.picker.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/mui.poppicker.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/newpay-bb7fcb5546.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/feiqi-ee5401a8e6.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/pay-2b02ca7987.css">
<style>
	.mui-input-group .mui-input-row, .mui-input-row{
	    height: 45px;
		padding-right: 10px;
	}
	.marea{padding-right: 15px;}
	.regfrm label {
	    padding: 14px 15px;
	}
	.marea label {
	    padding: 14px 0;
	}
	.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea {
	    height: 45px;
	    text-align: right;
	}
	.mui-input-row:last-child:after{
    height: 0;
	}
	@media screen and (max-width: 321px){
		.marea label {
		    font-size: 14px;
		    width: 24%;
		    padding-top: 15px;
		}
		.marea label~input {
		    width: 76%;
		}
		.regfrm .mui-input-row label {
		    width: 24%;
		    white-space: nowrap;
		    font-size: 14px;
		    padding: 15px 15px;
		}
		.regfrm .mui-input-row input {
		    font-size: 14px;
		    width: 74%;
		}			
	}
	@media screen and (max-width: 350px){
		.marea label~input {
	        font-size: 13px;			   
		}
	}
	.seltarr {
	    display: block;
	    position: absolute;
	    top: 20px;
	    right: 10px;
	}
	
	.sfz_box{ background:#fff; padding:5px 2px; height:550px;}
	.sfz_box:after{ content:''; clear:both;}
	#c1 { background-color: #D1EEEE; }
</style>
</head>
<body class="newbg">
 	<!-- header -->
 	<header class="mui-bar mui-bar-nav hnav">
		<a class="back" href="<?php echo U('Order/bankss');?>"></a>
		<h1 class="mui-title">签名</h1>
	</header>
	<!-- header end-->
<div class="mui-content">

	<!-- <article class="tipinfo">
		<p>*请在框内签名</p>
	</article> -->
	<!-- 签名 -->	
	<div style="width: 100%; background-color: #fff; padding: 10px 0; text-align: center;">
		<canvas id="c1" width="980" height="550px"> 
		   <!--宽高写在html里，写在css里有问题-->
		   <span>该浏览器不支持canvas内容</span> 
		   <!--对于不支持canvas的浏览器显示--> 
	  	</canvas> 
	</div>

	<section class="msub" style="position: relative;">
		<button type="button" class="mui-btn mui-btn-danger mui-button-pay mui-button-gry" style="margin-bottom: 10px;" id="clear">重寫</button>
		<!-- 提示 -->
		<div style="display: none;position: absolute;" class="errdeo" id="messageBox">
		</div>

		<button type="button" class="mui-btn mui-btn-danger mui-button-pay mui-button-gry" onClick="saveInfo();">完成</button>
	</section>
</div>
<script src="__PUBLIC__/home/js/jquery-1-fe84a54bc0.11.1.min.js"></script>
<script src="__PUBLIC__/home/js/stuCheck-ae09551939.js"></script>
<script src="__PUBLIC__/home/js/geihuaCom-1088667498.js"></script>
<script src="__PUBLIC__/home/js/mui.min.js"></script>
<script src="__PUBLIC__/home/js/lrz.all.bundle.js"></script>
<script src="__PUBLIC__/home/js/mui-bd98b45634.picker.js"></script>
<script src="__PUBLIC__/home/js/mui-9fb36284ae.poppicker.js"></script>
<script src="__PUBLIC__/home/js/city-564994092a.data.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__/home/js/city-67f8c196d0.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>

	/*插件参考地址http://www.jq22.com/jquery-info1057*/
/*移动端事件*/
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d')
canvas.addEventListener('touchstart',
function(ev) {
    ev.preventDefault();
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.lineWidth = "3";
    var ev = ev.touches[0] || window.event.touches[0];
    ctx.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
    canvas.addEventListener('touchmove',
    function(ev) {
        var ev = ev.touches[0] || window.event.touches[0];
        ctx.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
        ctx.stroke();
    })
})

/*pc端事件*/

canvas.onmousedown = function(ev) {
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.lineWidth = "3";
    ctx.lineJoin = 'round';
    var ev = ev || window.event;
    ctx.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
    canvas.onmousemove = function(ev) {
        ctx.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
        ctx.stroke();
    }
    canvas.onmouseup = function() {
        canvas.onmousemove = null;
        canvas.onmouseup = null;
    };
}


document.getElementById('clear').addEventListener("click",
function() {
    canvas.width = canvas.width;
});





function showalert(msg){
	$("#messageBox").html(msg);
	$("#messageBox").show();
	setTimeout(function(){
		$("#messageBox").hide();
	},2000);
}


//保存资料
function saveInfo(){
    var yinhang = GetQueryString("yinhang");
    var lx = GetQueryString("lx");
	var qianming = canvas.toDataURL("image/png");
	console.log(qianming);
	if(!isCanvasBlank(canvas)){
		$.post(
			"<?php echo U('Info/qianming');?>",
			{
			    yinhang:yinhang,
				lx:lx,
				qianming:qianming
			},
			function (data,state){
				if(state != "success"){
					showalert("請求數據失敗,請重試!");
				}else if(data.status == 1){
					showalert("保存成功!");
					window.location.href = "<?php echo U('Index/info');?>";
				}else{
					showalert(data.msg);
				}
			}
		);
	}else{
		showalert("請簽名後再完成");
	}
}

function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');//系统获取一个空canvas对象
    blank.width = canvas.width;
    blank.height = canvas.height;
    return canvas.toDataURL() == blank.toDataURL();//比较值相等则为空
}

function GetQueryString(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");     var r = window.location.search.substr(1).match(reg);
	//search,查询？后面的参数，并匹配正则
	if(r!=null)return  unescape(r[2]); return null;
}

</script>
<div style="display: none;">
	<?php
 $name = "cfg_sitecode"; if(empty($name)){ echo ""; }else{ echo htmlspecialchars_decode(C($name)); } ?>
</div>
</body>
</html>